<template>
	<picker style="width: 100%;height: 100%;display:flex;align-items:center;padding-left: 54rpx;" mode="multiSelector"
		@columnchange="colChange" @change="change" :value="valueIndex" :range="rangeData" :range-key="industryName">{{text}}
	</picker>
</template>

<script>
	export default {
		name: 'MultipleCol',
		data() {
			return {
				rangeData: [],
				valueIndex: [],
			}
		},
		props: {
			range: {
				type: Array,
				default: () => []
			},
			industryName: {
				type: String,
				default: 'industryName',
			},
			sonList: {
				type: String,
				default: 'sonList',
			},
			value: {
				type: Array,
			}
		},
		computed: {
			text() {
				if (this.rangeData.length === 0) return '';
				let text = '行业';
				let current = this.range;
				if (this.valueIndex.length > 0) {
					text = ''
					this.rangeData.forEach((item, index) => {
						text += current[this.valueIndex[index]].industryName + '-';
						current = current[this.valueIndex[index]].sonList
					})
					
					text = text.substr(0, text.length - 1)
					
				}
				return text;
			}
		},
		watch: {
			range: {
				handler(val) {
					if (val.length == 0) {
						return [];
					}
					this.valueIndex = [];
					this.rangeData = [];
					let data = [];
					let loop = true;
					let current = val;
					data.push(current);
					// this.valueIndex.push(0)
					while (loop) {
						if (current[0].sonList) {
							// this.valueIndex.push(0)
							data.push([...current[0].sonList])
							current = current[0].sonList;
						} else {
							loop = false;
							break;
						}
					}
					this.rangeData = data;
				},
				immediate: true
			}
		},
		methods: {
			colChange(e) {
				let col = e.detail.column;
				let index = e.detail.value;
				if (col === this.rangeData.length - 1) return;
				console.log(e, this.rangeData)
				let current = this.rangeData[col][index].sonList;
				for (let i = col + 1; i < this.rangeData.length; i++) {
					this.$set(this.rangeData, i, current);
					current = current[0].sonList
				}
			},
			change(e) {
				let value = e.detail.value;
				this.valueIndex = value;
				let result = [];
				let data = this.range[value[0]];
				value.forEach((item, index) => {
					if (index > 0) {
						data = data.sonList[item]
					}
					result[index] = data.id
				})
				this.$emit('selected', result)
			},
		}
	}
</script>

<style lang="scss" scoped>
	picker{
		text-align: center;
	}
</style>
